<template>
    <el-dialog v-model="isOpen" @open="open" title="选择属性" @close="close" style="width: 30%;min-width: 400px">
        <el-form inline >
            <el-form-item>
                <el-input v-model="query.payload.attrName" placeholder="属性名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" activity @click="queryNoAttrRelation">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="table" border v-loading="loading"
                  :data="data.tableData"
                  @selection-change="handleSelectionChange"
                  header-cell-class-name="headerClass">
            <el-table-column type="selection" width="55" />
            <el-table-column align="center" type="index"  label="序号" width="80px" />
            <el-table-column align="center" prop="attrName" label="属性名" />
            <el-table-column align="center" prop="valueSelect" label="可选值列表" width="150px" show-overflow-tooltip>
                <template #default="scope">
                    <el-tag type="primary">{{scope.row.valueSelect}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-popconfirm title="移除？" @confirm="deleteRelation(scope.row.attrId, scope.row.attrGroupId)"  @cancel="">
                        <template #reference>
                            <el-link type="danger" title="移除">
                                <el-icon :size="15">
                                    <Delete />
                                </el-icon>
                                移除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <el-pagination
                    style="display: flex;align-items:center;justify-content:center;"
                    v-model:currentPage="query.currentPage"
                    v-model:page-size="query.pageSize"
                    :page-sizes="[10, 20, 30]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="query.total"
                    @size-change="queryNoAttrRelation"
                    @current-change="queryNoAttrRelation"
            />
        </el-table>
        <el-row style="display: flex;justify-content: center;margin-top: 10px">
            <el-button type="primary" @click="add" style="margin-bottom: 10px">确认新增</el-button>
            <el-button @click="close" type="primary" >取消</el-button>
        </el-row>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import MySelectOption from '@/components/common/MySelectOption.vue'
    import UploadFile from '@/components/common/UploadFile.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'

    let dataForm = ref(null)
    const emits = defineEmits(['close','reload'])
    const rules = reactive({
        attrGroupName: [{ required: true, message: '请输入分组名', trigger: 'blur' },],
        sort: [{required: true,message: '请输入排序数字', trigger: 'blur'},],
        descript: [{required: true,message: '请输入描述', trigger: 'blur'},],
        icon: [{required: true,message: '请填写图标', trigger: 'blur'},],
    })
    let props = defineProps(['openType','id'])
    let isOpen = ref(false)
    let selections = ref([])
    defineExpose({isOpen})
    let loading = ref(true)
    let query = reactive({currentPage:1, pageSize:10, total:0, payload: {}})
    let data = reactive({
        open:false,
        tableData:[],
        type:"",
        id:"",
    });
    function open() {
        if(isOpen.value === true){
            queryNoAttrRelation()
        }
    }

    function queryNoAttrRelation(){
        query.payload.attrGroupId = props.id
        request.post(`/api/pmsAttrGroup/getNoAttrRelation`, query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function close(){
        isOpen.value = false
        data.tableData = []
    }

    function add(){
        if(selections.value.length>0){
            request.post("/api/pmsAttrGroup/addRelations", selections.value).then(resp => {
                close()
                emits("reload")
                ElMessage({message: '添加成功！', type: 'success'})
            })
        }else{
            ElMessage({message: '未选择属性！', type: 'error'})
        }
    }
    function handleChange (node){
        form.catalogId = node[node.length-1]
    }
    function deleteRelation(attrId){
        let param = [{attrId: attrId, attrGroupId: props.id}]
        request.post("/api/pmsAttrGroup/deleteRelation", param).then(resp => {
            ElMessage({message: '移除成功！',type: 'success'})
            queryNoAttrRelation()
        })
    }
    const handleSelectionChange = (rows) => {
        selections.value.length=0
        rows.forEach(e=>{
            selections.value.push({attrId: e.attrId, attrGroupId: props.id});
        })
    }
</script>

<style scoped>

</style>